import React, {Component} from 'react'

import OpenStyle from "../components/openStyle/openStyle"
import OpenLK28Style from "../components/openStyle/openLK28Style"
import BetTimer from "../components/betTimer"

export default class BetCenterHistory extends Component {
  constructor (props){
   super(props)
  //  this.fpTimer = null;
  //  this.kjTimer = null;
  //  this.reloadTimer = null;
   this.state= {
    isShow: false,
    // fpSecond:this.props.fpSecond ? this.props.fpSecond: 0,
    // kjSecond:this.props.kjSecond ? this.props.kjSecond: 0,
    // reloadS:10
   }
}

// startTimer() {

//   const {kaijiang,fenpan} = this.props;
//   let {fpSecond, kjSecond,reloadS} = this.state;
//   // console.log(this.state.fpSecond,"fep",this.state.kjSecond);
//   this.clearTimer();
//   let _this = this;
//   if(fpSecond > 0 || kjSecond > 0  && reloadS==10){
//     this.reloadTimer = setInterval(()=>{
//       const {reloadS} = this.state;
//       // console.log(reloadS,"timer1");
//       if(isNaN(reloadS)){
//         _this.setState({
//           reloadS:10
//         })
//         this.props.loadCaiPiaoData()//载入中的时候 去校验时间参数 
//       }else{
//         _this.setState({
//           reloadS:reloadS-1 || "载入中"
//         })
//       }
//     },1000)
//   }
//   if (fpSecond > 0) {
//     this.fpTimer = setInterval(() => {
//       const {fpSecond} = this.state;
//       // console.log(fpSecond,"fep");
//       if (fpSecond <= 0) {
//         _this.finished = true;
//         clearInterval(_this.fpTimer);
//         fenpan();
//         _this.fpTimer = null;
//       } else {
//         _this.setState({
//           fpSecond: fpSecond - 1
//         });
//       }
//     }, 1000);
//   }

//   if (kjSecond > 0) {
//     this.kjTimer = setInterval(() => {
//       const {kjSecond} = this.state;
//       if (kjSecond <= 0) {
//         clearInterval(_this.kjTimer);
//         kaijiang();
//         _this.kjTimer = null;
//       } else {
//         _this.setState({
//           kjSecond: kjSecond - 1
//         });
//       }
//     }, 1000);
//   }
// }
// clearTimer() {
//   if(this.reloadTimer){
//     clearInterval(this.reloadTimer);
//     this.reloadTimer = null;
//   }
//   if (this.fpTimer) {
//     clearInterval(this.fpTimer);
//     this.fpTimer = null;
//   }
//   if (this.kjTimer) {
//     clearInterval(this.kjTimer);
//     this.kjTimer = null;
//   }
// }
// reloadS(){
//  this.clearTimer()
//   this.setState({
//     reloadS:10
//   })
//   // console.log(this.props);
//   this.props.loadCaiPiaoData()
// }
// formatSecond(second) {
//     // console.log(second,"kaijianghsij");
    
//   if (second < 0) return 0;

//   let day = ~~(second / ( 24 * 60 * 60) );
//   second = second - day * 24 * 60 * 60 ;
//   let hour = ~~ (second / ( 60 * 60 ) );
//   second = second - hour * 60 * 60;
//   let min = ~~ (second / 60);
//   second = second - min * 60;
  
//   // 天
//   if (day > 0) day = day + '天';
//   else day = '';
  
//   // 小时
//   if (hour > 0) hour = hour + '小时';
//   else hour = '';
  
//   // 分钟
//   if (min < 10 && min > 0 ) {
//     min = '0' + min + ':';
//   }
//   else if (min <= 0) {
//     min = '00' + ':';
//   }
//   else {
//     min += ':';
//   }
  
//   // 秒
//   if (second < 10) second = '0' + second;
//   return day + hour + '' + min  + second;
// }
// componentDidMount(){
//   console.log("runing");
//   this.startTimer();
// }
// componentWillReceiveProps(nextProps) {
//   //当用户切换彩种时 重新获取时间参数
//   // 用户刷新 
//   // 切换成已加载过的这个模块
//   if(this.props.kjSecond !== nextProps.kjSecond  ||  this.props.fpSecond  !== nextProps.fpSecond){
//     this.setState({
//       fpSecond: nextProps.fpSecond ? nextProps.fpSecond: 0,
//       kjSecond: nextProps.kjSecond ? nextProps.kjSecond: 0,
//       reloadS:10
//     }, ()=>this.startTimer()) // 想要设置完state之后立即使用 只能回调
//   }
// }

// componentWillUnmount() {
//   this.clearTimer();
// }
   render() {
     const {history,currentQs,fenpanZhong} = this.props
    //  const {fpSecond, kjSecond,reloadS} = this.state
    // console.log(history,"11");
   return <div>
     {
       !history ? <div className="colorful-num">数据加载中</div> :
              <div className="colorful-num">
              <div className="colorfulnumtitle">
                <span>{history[0].qs}</span>期
              </div>
              <div className="colorfulnumball">
              {
                this.props.gameCode == "BJKL8" ?    
                <OpenLK28Style code={history[0].openCode}></OpenLK28Style>
                :<OpenStyle code={history[0].openCode} gameCode={this.props.gameCode}></OpenStyle>
              }
              
              </div>
            </div>
     }
            <div  className={(this.state.isShow && !fenpanZhong )? "wangqi show" : "wangqi"}>
            {
             history && history.slice(1,8).map((item,index)=>{
                return          <div className="colorful-num small" key={index}>
                <div className="colorfulnumtitle">
                  <span>{item.qs}</span>期
                </div>
                <div className="colorfulnumball">
                {
                   this.props.gameCode == "BJKL8" ?    
                   <OpenLK28Style code={item.openCode}></OpenLK28Style>
                   : <OpenStyle code={item.openCode} gameCode={this.props.gameCode}></OpenStyle>
                }
               
                </div>
              </div>
              })
            }
            </div>
            <div className="rough_lines1"><div className="uq_icon" onClick={()=>{this.setState({isShow:!this.state.isShow})}}>{this.state.isShow ? "" : <div className="uq_icon2"></div>}</div></div>
            
          {/* <div className="now-qishu"> <div className="qishu"><span>{currentQs}</span>期</div>
                <div className="distime">距离{fpSecond <= 0 ? '开奖': '封盘' }： 
                <span className="red">{ fpSecond <= 0 ? this.formatSecond(kjSecond): this.formatSecond(fpSecond) }</span> 
                 <div className="updata"><div onClick={()=>{this.reloadS()}}></div> <span>{reloadS}</span></div>
                </div>
          </div> */}
            <BetTimer {...this.props}></BetTimer>

            <div className="rough_lines1"></div>
   </div>
   }
}